<template>
    <div id="container" style="height: 600px;background: white"></div>
</template>

<script>
import { Graph } from '@antv/x6';
import '@antv/x6-vue-shape'; // 渲染独立节点时需要该插件
import vueShape from '@/view/demoItem/vueShape';
export default {
    data () {
        return {
            data: {
                nodes: [],
                edges: [],
            },
            methodData: '动态节点的值'
        };
    },
    computed: {
    },
    mounted () {
        this.init();
    },
    methods: {
        init () {
            this.data.nodes = [
                {
                    id: '1', // String，可选，节点的唯一标识
                    x: 100,       // Number，必选，节点位置的 x 值
                    y: 100,       // Number，必选，节点位置的 y 值
                    width: 50,   // Number，可选，节点大小的 width 值
                    height: 40,  // Number，可选，节点大小的 height 值
                    label: '开始', // String，节点标签
                    attrs: {
                        body: {
                            fill: '#fff',
                            stroke: '#fff',
                            rx: 25,
                            ry: 25,
                            filter: {
                                name: 'dropShadow',
                                args: {
                                    dx: 2,
                                    dy: 2,
                                    blur: 4,
                                    opacity: 0.3,
                                }
                            }
                        }
                    }
                },
                {
                    id: '2', // String，节点的唯一标识
                    x: 200,      // Number，必选，节点位置的 x 值
                    y: 106,      // Number，必选，节点位置的 y 值
                    width: 100,   // Number，可选，节点大小的 width 值
                    height: 30,  // Number，可选，节点大小的 height 值
                    label: '添加关键词', // String，节点标签
                },
            ];
            // this.data.edges = [
            // {
            //     source: '1', // String，必须，起始节点 id
            //     target: '2', // String，必须，目标节点 id
            // },
            // ];
            const graph = new Graph({
                container: document.getElementById('container'),
                width: 800,
                height: 600,
                grid: true,
                keyboard: {
                    enabled: true, // 禁用键盘
                    global: true
                },
                scroller: {
                    enabled: true, // 能够滚动
                    pannable: true, // 能否平移
                },
                mousewheel: {
                    enabled: true,
                    modifiers: ['ctrl', 'meta'], // 设置修饰键后需要按下修饰键并滚动鼠标滚轮时才触发画布缩放。通过设置修饰键可以解决默认滚动行为与画布缩放冲突问题。
                },

            });
            this.graph = graph;
            const demoObj = {
                source: '1', // String，必须，起始节点 id
                target: '2', // String，必须，目标节点 id
                router: {
                    name: 'er',
                    args: {
                        startDirections: ['bottom'],
                        endDirections: ['top']
                    }
                },
                attrs: {
                    line: {
                        stroke: '#95ccff',
                        strokeDasharray: 5,
                        targetMarker: 'classic',
                        style: {
                            animation: 'ant-line 30s infinite linear',
                        }
                    },
                },
                connector: {
                    name: "jumpover",
                    args: { radius: 10 }
                }
            };
            graph.fromJSON(this.data);

            // setTimeout(() => {
            //     graph.clearCells(); // 清空画布
            // }, 3000);

            // 连接画布
            setTimeout(() => {
                // graph.addEdge({
                //     shape: 'edge', // 指定使用何种图形，默认值为 'edge'
                //     source: '1',
                //     target: '2',
                // });
                graph.addEdge(demoObj);
                this.addNewNode(); // 添加一个普通节点
                this.addMethodNode(); // 添加一个可以操作的节点
            }, 1000);

        },
        addNewNode () {
            this.graph.addNode({
                shape: 'html',
                id: '3',
                x: 200,
                y: 200,
                width: 100,
                height: 100,
                html () {
                    const wrap = document.createElement('div');
                    wrap.style.width = '100%';
                    wrap.style.height = '100%';
                    wrap.style.background = '#95ccff';
                    return wrap;
                }
            });
            this.addEdge('2', '3');

        },
        addMethodNode () {
            const _this = this;
            this.graph.addNode({
                id: '4',
                x: 400,
                y: 200,
                width: 200,   // Number，可选，节点大小的 width 值
                height: 200,  // Number，可选，节点大小的 height 值
                shape: 'vue-shape',
                component: {
                    template: `<vue-shape :methodData="methodData" @btn="btn" @btn2="btn2"></vue-shape>`,
                    data () {
                        return {
                            methodData: _this.methodData,
                        };
                    },
                    components: {
                        vueShape,
                    },
                    methods: {
                        btn: _this.alertMethod.bind(_this, 123), // 传值的话需要用bind绑定
                        btn2: _this.btn2
                    }
                }
            });
            this.addEdge('3', '4');
        },
        addEdge (source, target) {
            const demoObj = {
                source, // String，必须，起始节点 id
                target, // String，必须，目标节点 id
                // 设置线成z样弯折
                router: {
                    name: 'er',
                    args: {
                        startDirections: ['bottom'],
                        endDirections: ['top']
                    }
                },
                // 设置样式
                attrs: {
                    line: {
                        stroke: '#95ccff', // 颜色
                        strokeDasharray: 1, // 设置线分段的密度
                        // 设置箭头
                        targetMarker: 'classic',
                        style: {
                            animation: 'ant-line 30s infinite linear',
                        }
                    },
                },
                // 设置有圆弧倒角
                connector: {
                    name: "jumpover",
                    args: { radius: 10 }
                },
                labels: [ // 设置线上的字
                    {
                        attrs: { label: { text: '不好' } }
                    }
                ]
            };
            this.graph.addEdge(demoObj);
        },
        alertMethod (val) {
            console.log(val);
        },
        btn2 (val) {
            console.log('<==按钮2的点击===');
            console.log(val);
            console.log(this.methodData);
            console.log('==按钮2的点击===>');
        }
    },

}
</script>